<template>
  <TSkuTable ref="refSkuTable" :columns="tableColumns">
    <template #salesType_column_content="scope">
      <el-radio-group v-model="scope.row.salesType">
        <el-radio label="1">按件计费</el-radio>
        <el-radio label="2">按重量计费</el-radio>
      </el-radio-group>
    </template>
    <template #unit_column_content="scope">
      <el-select v-model="scope.row.unit" placeholder="请选择">
        <el-option label="把" value="把"></el-option>
        <el-option label="件" value="件"></el-option>
        <el-option label="个" value="个"></el-option>
      </el-select>
    </template>
    <template #weight_column_content="scope">
      <el-input-number
        v-model="scope.row.weight"
        controls-position="right"
        :precision="2"
        :min="0"
        :max="100"
      ></el-input-number>
    </template>
    <template #skuImage_column_content="scope">
      上传组件将返回结果赋值给 {{ scope.row.skuImage }} 即可
    </template>
  </TSkuTable>
  <el-button type="primary" @click="getResult" class="mt20px">
    获取最终结果
  </el-button>
  <el-button type="primary" @click="setResult" class="mt20px">
    设置默认数据回显
  </el-button>
  <div>最终数据:{{ resultValue }}</div>
</template>

<script lang="ts" setup>
import { TSkuTable, TSkuTableColumn } from '@twa/components'
import { ref } from 'vue'

const tableColumns = ref<TSkuTableColumn[]>([
  {
    label: '描述',
    prop: 'skuDesc',
    required: true,
  },
  {
    label: '参考价格',
    prop: 'price',
    required: true,
  },
  {
    label: '销售方式',
    prop: 'salesType',
    tableColumnProps: {
      width: '260',
    },
  },
  {
    label: '单位',
    prop: 'unit',
  },
  {
    label: '重量(kg)',
    prop: 'weight',
  },
  {
    label: '图片',
    prop: 'skuImage',
  },
])

const refSkuTable = ref()

const resultValue = ref()
function getResult() {
  refSkuTable.value.getResult().then(data => {
    resultValue.value = data
  })
}

function setResult(){
  // 从接口返回的数据内容
  const data = { 
    productAttribute: [
      { 
        attributeName: "颜色", 
        productAttributeValue: [ { attributeValue: "黑色" }, { attributeValue: "白色" } ] 
      }, 
      { 
        attributeName: "尺寸", 
        productAttributeValue: [ { attributeValue: "大" }, { attributeValue: "小" } ] 
      }
    ], 
    productTable: [ 
      { 
        "skuDesc": "1", 
        "price": "2", 
        "salesType": "1", 
        "unit": "把", 
        "weight": "", 
        "skuImage": "" 
      }, 
      { 
        "skuDesc": "3",
        "price": "4", 
        "salesType": "3", 
        "unit": "", 
        "weight": "", 
        "skuImage": "" 
      }, 
      { 
        "skuDesc": "5", 
        "price": "6", 
        "salesType": "", 
        "unit": "", 
        "weight": "5.1", 
        "skuImage": "" 
      }, 
      { 
        "skuDesc": "7", 
        "price": "8", 
        "salesType": "", 
        "unit": "", 
        "weight": "", 
        "skuImage": "xx" 
      } 
    ] 
  }
  refSkuTable.value.initResult(data)
}
</script>
